<template>
	<div>
		<div class="left noScroll">
			<NewSection :type="1" imgType="car_jiankong" title="车辆监控" @onClickRightIcon="onClickCarRightIcon">
				<!-- NewSection的属性rightIcon2021年6月17日去掉 -->
				<div class="left-person">
					<div class="left-person-item">
						<i-circle :percent="cljk_online_rate" :size="70" :trail-width="10" trail-color="#272c2f"
							:stroke-width="10" stroke-color="#00BAFF">
							<Icon custom="i-icon icon-zaixian2" size="24" color="#fff" />
						</i-circle>
						<div class="left-person-item-center flex-1 m-l-25">
							<p class="flex a-center j-between">
								<span>在线情况</span>
							</p>
							<div class="flex">
								<p class="flex-1">
									<span class="">{{cljk_online_rate}}</span>%
								</p>
							</div>
						</div>
						<div class="left-person-item-right flex-1">
							<span class="">{{cljk_online}}</span>/<span class="">{{cljk_total}}</span>
						</div>
						<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer"
							@click.stop="onClickGenItem(0)" />
					</div>
					<div class="left-person-item">
						<i-circle :percent="cljk_chuqin_rate" :size="70" :trail-width="10" trail-color="#272c2f"
							:stroke-width="10" stroke-color="#00BAFF">
							<Icon custom="i-icon icon-kaoheguanli" size="24" color="#fff" />
						</i-circle>
						<div class="left-person-item-center flex-1 m-l-25">
							<p class="flex a-center j-between">
								<span>出勤情况</span>
							</p>
							<div class="flex">
								<p class="flex-1">
									<span class="">{{cljk_chuqin_rate}}</span>%
								</p>
							</div>
						</div>
						<div class="left-person-item-right flex-1">
							<span class="">{{cljk_chuqin}}</span>/<span class="">{{cljk_total}}</span>
						</div>
						<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer"
							@click.stop="onClickGenItem(1)" />
					</div>
				</div>
				<div v-if="false" class="left-stay">
					违规停留<span>{{cljk_wgtl}}</span>
				</div>
			</NewSection>
		</div>
		<Modal v-model="genDetailVisible" :mask="false" footer-hide :closable="false" :z-index="600" width="392"
			:styles="{left:'420px',margin:'0',top:'80px'}" @on-visible-change="onChangeGenDetailVisible"
			v-click-outside="handlerCloseGenDetail">
			<div class="left-top-detail">
				<!-- 车辆 -->
				<div class="left-top-car">
					<header>
						<div class="left-top-detail-name">
							{{currentGenListIndex == 0 ? '在线情况' : '出勤情况'}}
						</div>
						<Icon custom="i-icon ivu-icon-ios-close" size="40" class="cursor-pointer"
							@click="genDetailVisible = false" />
					</header>
					<section>
						<div class="section-top">
							<span class="fs-16">{{currentGenListIndex===0?'总在线：':'总出勤：'}}</span>
							<span class="fs-20 text-white">{{currentGenListIndex == 0 ? cljk_online : cljk_chuqin}}
								/
								{{cljk_total}}</span>
						</div>
						<div class="left-top-car-list">
							<template v-for="(item,index) in carArr">
								<div class="left-top-car-item cursor-pointer" :key="index"
									@click.stop="onClickGenDetailItem('车辆',item.type,3)" v-if="item.num != 0">
									<img :src="carImg[item.icon]">
									{{item.type}}
									<span
										class="fs-16 m-l-8">{{currentGenListIndex==0?item.onlinum:item.chuqinnum}}</span>
									<span class="fs-16"> / {{item.num}}</span>
								</div>
							</template>
						</div>
					</section>
					<div class="left-top-detail-footer"></div>
				</div>
			</div>
		</Modal>
		<div class="right noScroll" v-show="!workVisible">
			<NewSection :type="noCleanVisible?5:1" imgType="garbage" title="垃圾点位">
				<div class="right-place">
					<div class="right-place-top">
						<div class="right-place-top-item">
							<Icon custom="i-icon icon-leixing_lajitong" size="36" class="right-place-top-item-icon" />
							<div class="right-place-top-item-text">
								<p>垃圾桶</p>
								<span>{{ljdw.ljtCount}}</span>
							</div>
						</div>
						<div class="right-place-top-item">
							<Icon custom="i-icon icon-leixing_lajidian" size="36" class="right-place-top-item-icon" />
							<div class="right-place-top-item-text">
								<p>收集点</p>
								<span>{{ljdw.sjdCount}}</span>
							</div>
						</div>
					</div>
					<div class="right-place-line">
						<img src="../../../../assets/new/new_img_line.png">
					</div>
					<div class="right-place-bottom">
						<i-circle :percent="cleanPoint.cleanRate" :size="70" :trail-width="10" trail-color="#272c2f"
							:stroke-width="10" stroke-color="#00BAFF">
							<span style="color: #FFFFFF;" class="fs-18">{{cleanPoint.cleanRate}}%</span>
						</i-circle>
						<div class="right-place-bottom-item">
							<p>应清点位</p>
							<span>{{cleanPoint.countSize || '0'}}</span>
						</div>
						<!-- <div class="line"></div> -->
						<div class="right-place-bottom-item">
							<p>已清</p>
							<span>{{cleanPoint.countClean || '0'}}</span>
						</div>
						<div class="right-place-bottom-item cursor-pointer">
							<p>未清</p>
							<div class="flex a-center">
								<span>{{cleanPoint.countNotClean || '0'}}</span>
							</div>
						</div>
						<Icon custom="i-icon icon-jiantou2" size="18" color="#fff" @click.stop="onClickNoClean" class="cursor-pointer" :class="{'jiantou-route':noCleanVisible}" />
					</div>
					<div class="right-place-list flex flex-wrap" v-show="noCleanVisible">
						<div class="fs-14 flex a-center w-p-50 item" v-for="(item,index) in noCleanArr" :key="index"
							@click.stop="onClickNoCleanItem(item)">
							<div class="flex a-center cursor-pointer">
								<Icon custom="i-icon icon-leixing_lajitong" size="24" class="m-l-5 m-r-10" />
								<span class="m-t-2">{{item.name}}</span>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
			<NewSection :type="4" imgType="work" title="作业实况" rightIcon @onClickRightIcon="onClickWork">
				<div class="right-work fs-14">
					<div class="right-work-bottom">
						<div class="right-work-bottom-item">
							<div class="flex a-center j-between">
								清运计划
								<span class="fw-700">{{workScene.finishRate}}%</span>
							</div>
							<Progress :percent="workScene.finishRate" hide-info :stroke-color="['#2191BD','#00BAFF']" />
						</div>
					</div>
					<div class="right-work-line">
						<img src="../../../../assets/new/new_img_line.png">
					</div>
					<div class="right-work-cont">
						<div>
							完成
							<span class="fs-19">{{workScene.finished}}</span>
						</div>
						<div>
							作业中
							<span class="fs-19">{{workScene.working}}</span>
						</div>
						<div>
							未开始
							<span class="fs-19">{{workScene.other}}</span>
						</div>
						<div>
							未完成
							<span class="fs-19">{{workScene.unFinished}}</span>
						</div>
					</div>
					<div class="right-work-line">
						<img src="../../../../assets/new/new_line.png">
					</div>
					<div class="right-resource-bottom">
						<div class="right-resource-bottom-item">
							<img src="../../../../assets/new/new_img_lwork2.png">
							<div class="right-resource-bottom-item-text">
								<p>今日里程</p>
								<div class="fs-16">
									{{workScene.mileageSum}}
									<span class="fs-12">km</span>
								</div>
							</div>
						</div>
						<div class="right-resource-bottom-item">
							<img src="../../../../assets/new/new_img_lwork1.png">
							<div class="right-resource-bottom-item-text">
								<p>清运桶数</p>
								<div class="fs-16">
									{{cleanPoint.countSize || '0'}}
									<span class="fs-12">桶</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
			<!-- 2021年6月17日隐藏 -->
			<MainSection icon="icon-zoushi2" title="作业走势" v-if="false">
				<div class="right-trend">
					<div class="right-trend-top">
						<Select v-model="trend" style="width:120px">
							<Option v-for="item in trendArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
						<div>
							日均：
							<span>239.43 (km)</span>
						</div>
					</div>
					<Echarts height="240px" :options="trendOptions"></Echarts>
				</div>
			</MainSection>
		</div>

		<!-- 左 车辆监控图标 -->
		<Modal v-model="carCaseVisible" title="车辆情况" width="400" footer-hide :mask="false"
			:styles="{left:'8px',top:'80px',margin:'0'}">
			<Tabs :animated="false">
				<TabPane v-for="(item,index) in carCaseList" :key="index" :label="item.title">
					<!-- <MainSearchTabs :data="item.list" :treeData="carTreeArr" :searchVisible="searchCarVisible"
						@onClickTabItem="onClickCarCaseTab" @onClickInputIcon="onClickCarInputIcon"
						@onClickDeleteInput="onClickCarDeleteInput"></MainSearchTabs> -->
				</TabPane>
			</Tabs>
			<div class="car-case-list">
				<div class="noData">
					<img src="../../../../assets/main/blank_black.png" style="cursor: default;">
					<p>暂无数据</p>
				</div>
			</div>
		</Modal>

		<!-- 右 作业实况 -->
		<div v-if="workVisible" class="work-right">
			<div class="work-right-title" @click.stop="workVisible = false">
				<img src="../../../../assets/new/new_img_back.png" class="cursor-pointer">
				垃圾清运实况
			</div>
			<div class="work-cont">
				<div class="work-top flex j-between">
					<div class="work-top-tab flex j-between">
						<div @click.stop="onClickWorkTab(0)" :class="{'work-top-tab-current':workTopIndex == 0}">实时情况
						</div>
						<!-- <div @click.stop="onClickWorkTab(1)"
                 :class="{'work-top-tab-current':workTopIndex == 1}">历史记录</div> -->
					</div>
					<DatePicker :value='workDate' type="date" placeholder="" style="width: 120px"
						v-show="workTopIndex == 1" @on-change="onChangeWorkDate"></DatePicker>
				</div>
				<NewSearchTabs :data="workList" :treeData="workTreeData" :search="searchWork"
					:searchCount="searchCountWork" :searchVisible="searchWorkVisible" @onClickTypeItem="onClickTypeItem"
					@onChangeInput="onChangeWorkInput" @onClickInputIcon="onClickWorkInputIcon"
					@onClickDeleteInput="onClickWorkDeleteInput" @onChangeTree="onChangeTreeDepart"></NewSearchTabs>
				<div class="work-list">
					<NewMachineWorkList style="margin-top: 20px;" :list="machineWorkList"
						@onClickTrack='onClickWorkTrack'></NewMachineWorkList>
				</div>
			</div>
		</div>

		<!-- 作业实况 详情页 -->
		<Modal v-model="caseDetailVisible" width="400" footer-hide :mask="false" :styles="{top:'80px',margin: '0'}"
			class-name="work-detail">
			<div slot="header" class="case-detail-title">
				<div class="case-detail-title">
					<!-- <Icon custom="i-icon icon-zuojiantou" size="20" class="case-detail-title-icon"/> -->
					{{caseDetail.name}}
					<div class="case-detail-title-status m-r-10">进行中</div>
					<span v-if="workTopIndex == 1">2021-06-17</span>
				</div>
			</div>
			<div class="case-detail-cont">
				<div class="case-detail-cont-msg">
					<div class="case-detail-cont-msg-msg">
						<img src="../../../../assets/main/carImg.png" alt="">
						<div class="case-detail-cont-msg-msg-right">
							<div>
								{{caseDetail.name}}[{{caseDetail.type}}]
							</div>
							<div>
								驾驶员:{{caseDetail.people}}
							</div>
						</div>
					</div>
					<Icon custom="i-icon icon-jiankong11" size="24" class="case-detail-cont-msg-icon" />
				</div>
				<div class="case-detail-cont-class">
					<div>清扫保洁</div>
					<div class="line"></div>
					<div>洗扫车-早班(04:00-17:00)</div>
				</div>
				<div class="case-detail-cont-progress">
					<div class="case-detail-cont-progress-item">
						<div class="case-detail-cont-progress-item-title">
							<div>里程</div>
							<div>61%</div>
						</div>
						<Progress :percent="61" hide-info :stroke-width="5" />
					</div>
					<div class="case-detail-cont-progress-item">
						<div class="case-detail-cont-progress-item-title">
							<div>路径</div>
							<div>15%</div>
						</div>
						<Progress :percent="15" hide-info :stroke-width="5" />
					</div>
					<div class="case-detail-cont-progress-item">
						<div class="case-detail-cont-progress-item-title">
							<div>点位</div>
							<div>0%</div>
						</div>
						<Progress :percent="0" hide-info :stroke-width="5" />
					</div>
				</div>
				<div class="case-detail-cont-status">
					<div class="case-detail-cont-status-tabs">
						<div @click.stop="onClickDetailTabs(0)"
							:class="{'case-detail-cont-status-tabs-in' : detailTabsIndex == 0}">全部(1)</div>
						<div @click.stop="onClickDetailTabs(1)"
							:class="{'case-detail-cont-status-tabs-in' : detailTabsIndex == 1}">已清(0)</div>
						<div @click.stop="onClickDetailTabs(2)"
							:class="{'case-detail-cont-status-tabs-in' : detailTabsIndex == 2}">未清(1)</div>
						<div @click.stop="onClickDetailTabs(3)"
							:class="{'case-detail-cont-status-tabs-in' : detailTabsIndex == 3}">停留点(3)</div>
					</div>
					<div class="case-detail-cont-status-cont noScroll">

						<div class="arrest-point-item" v-if="detailTabsIndex == 3">
							<div class="arrest-point-item-title">
								<p>停留</p>
								<div>2021-06-17 05:33:57</div>
							</div>
							<div class="arrest-point-item-time">
								停息1小时21分钟
							</div>
						</div>

						<div class="case-detail-cont-status-cont-item" v-if="detailTabsIndex != 3">
							<div class="case-detail-cont-status-cont-item-msg">
								<Icon custom="i-icon icon-zhengque" size="12" class="icon finish-icon" />
								<div>已完成</div>
							</div>
							<div class="case-detail-cont-status-cont-item-time">
								04:32
							</div>
						</div>
						<div class="case-detail-cont-status-cont-item" v-if="detailTabsIndex != 3">
							<div class="case-detail-cont-status-cont-item-msg">
								<Icon custom="i-icon icon-jinhang" size="12" class="icon underway-icon" />
								<div>进行中</div>
							</div>
						</div>
						<div class="case-detail-cont-status-cont-item" v-if="detailTabsIndex != 3">
							<div class="case-detail-cont-status-cont-item-msg">
								<Icon custom="i-icon icon-dengdai2" size="12" class="icon nowork-icon" />
								<div>未作业</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Modal>

		<!-- 作业实况详情页的图例 -->
		<div class="legend" v-if="caseDetailVisible">
			<div class="legend-item">
				<div class="grid-row1">
					<div class="flex a-center">
						<p class="line"></p>
						作业网格
					</div>
					<i-switch />
				</div>
				<div class="grid-row2">
					<p>点位</p>
					<RadioGroup>
						<Radio label="all">
							全部
						</Radio>
						<Radio label="over">
							已清
						</Radio>
						<Radio label="not">
							未清
						</Radio>
					</RadioGroup>
				</div>
			</div>
			<div class="legend-item">
				<div class="grid-row1">
					<div class="flex a-center">
						<p class="line"></p>
						行驶轨迹
					</div>
					<i-switch />
				</div>
				<div class="grid-row2">
					<RadioGroup>
						<Radio label="original">
							原始
						</Radio>
						<Radio label="correction">
							纠偏
						</Radio>
					</RadioGroup>
				</div>
			</div>
			<div class="legend-item">
				<div class="grid-row1">
					<div class="flex a-center">
						停留点
					</div>
					<i-switch />
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import bus from '@/utils/bus'
	import {
		formatDate
	} from '@/utils/dateRangUtil';
	import MainSection from '../template/MainSection';
	import NewSearchTabs from '../new/NewSearchTabs';
	import NewMachineWorkList from '../new/NewMachineWorkList';
	import Echarts from '../../../common/Echarts';
	import vClickOutside from 'v-click-outside'
	import NewSection from '../subject/NewSection';
	export default {
		components: {
			MainSection,
			NewSearchTabs,
			NewMachineWorkList,
			Echarts,
			NewSection
		},
		directives: {
			clickOutside: vClickOutside.directive
		},
		data() {
			return {
				carImg: {
					'icon-sashuiche': require('../../../../assets/new/new_car_1.png'),
					'icon-beiche': require('../../../../assets/new/new_car_2.png'),
					'icon-zhuanyunche': require('../../../../assets/new/new_car_3.png'),
					'icon-beiche': require('../../../../assets/new/new_car_1.png'),
					'icon-xifenche': require('../../../../assets/new/new_car_5.png'),
					'icon-penwuche': require('../../../../assets/new/new_car_6.png'),
					'icon-xisaoche': require('../../../../assets/new/new_car_7.png'),
					'icon-zhuanyunche': require('../../../../assets/new/new_car_8.png')
				},
				cljk_chuqin: 0,
				cljk_chuqin_rate: 0,
				cljk_online: 0,
				cljk_online_rate: 0,
				cljk_total: 0,
				carTypeArr: [],
				cljk_wgtl: 0,

				// 应清点位
				cleanPoint: {},
				// 作业实况
				workScene: {},

				trend: 1,
				trendArr: [{
						id: 1,
						name: '里程'
					},
					{
						id: 2,
						name: '清运量'
					},
					{
						id: 3,
						name: '违规'
					},
					{
						id: 4,
						name: '报警'
					}
				],
				trendOptions: {
					xAxis: {
						type: 'category',
						axisLabel: {
							rotate: 30,
						},
						data: ['05/07', '05/08', '05/09', '05/10', '05/11', '05/12', '05/13']
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false
						}
					},
					tooltip: {
						trigger: 'axis'
					},
					series: [{
						type: 'line',
						symbol: 'none',
						smooth: true,
						data: [427, 156, 212, 205, 270, 210, 196],
					}],
					color: ['#25bb96'],
					textStyle: {
						color: '#fff'
					}
				},
				carCaseVisible: false,
				carCaseList: [{
					title: '实时作业',
					list: [{
						title: '全部',
						count: 0
					}, {
						title: '作业中',
						count: 0
					}, {
						title: '超时未到',
						count: 0
					}, {
						title: '空驶',
						count: 0
					}, ]
				}, {
					title: '当日情况',
					list: [{
						title: '全部',
						count: 10
					}, {
						title: '正常',
						count: 4
					}, {
						title: '晚到',
						count: 0
					}, {
						title: '离岗',
						count: 0
					}]
				}],
				carTreeValue: '',
				searchCarVisible: false,
				// 作业实况
				workVisible: false,
				workList: [{
						id: 99,
						title: '全部',
					}, {
						id: 3,
						title: '已完成',
					}, {
						id: 1,
						title: '进行中',
					}, {
						id: 0,
						title: '未开始',
					},
					//  {
					//   title: '晚到',
					//   count: 0
					// }
				],
				workDate: '',
				workTreeDepartId: '',
				searchWork: '',
				searchCountWork: 0,
				searchWorkVisible: false,
				machineWorkList: [],

				caseDetailVisible: false,
				caseDetail: '',
				detailTabsIndex: 0,
				genDetailVisible: false,
				currentGenListIndex: '',
				carArr: [],
				// 作业实况列表页tab
				workTopIndex: 0,
				// 未清点位
				noCleanVisible: false,
				noCleanArr: [],
        lTime: new Date().getTime(),// 最后一次点击的时间
        cTime: new Date().getTime(),//当前时间
        timer: null,
			};
		},
		computed: {
			...mapGetters({
				'workTreeData': 'getDepartmentTreeList',
				'carTreeArr': 'getCarTreeList',
			}),
			ljdw() {
				let data = this.$store.getters.getElementList.facilitiesElementsList
				let obj = {
					sjdCount: 0,
					ljtCount: 0
				}
				if (data) {
					data.forEach(item => {
						if (item.facilitiesType === '收集点') {
							obj.sjdCount = item.num
						} else if (item.facilitiesType === '垃圾桶') {
							obj.ljtCount = item.num
						}
					})
				}
				return obj
			}
		},
		watch: {
			workTopIndex() {
				this.workDate = formatDate(new Date())
				this.getWorkSceneList()
			},
      genDetailVisible(newVal){ 
        if (newVal) {
          this.timer = setInterval(() => {
            this.cTime = new Date().getTime();
            if ((this.cTime - this.lTime) > 15000) {
              this.genDetailVisible = false
            }
          }, 1000);
        } else {
          clearInterval(this.timer)
        }
      }
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapActions([
				'updateDepartmentTreeList',
				'updateCarTreeList',
				'updateElementList'
			]),
			init() {
				this.updateDepartmentTreeList()
				this.updateCarTreeList()
				this.updateElementList()
				this.getGarbageWorkScene()
				this.getGarbageCleanPoint()
        bus.$on('onMouseDownPage', data => {
          this.lTime = data
        })
				this.$http.getMapGarbageState().then((res) => {
					if (res.code === 200) {
						let data = res.result;
						this.cljk_chuqin = data.chuQinCount;
						this.cljk_chuqin_rate = data.chuQinRate;
						this.cljk_online = data.onlineCount;
						this.cljk_online_rate = data.onlineRate;
						this.cljk_total = data.total;
						this.carTypeArr = data.carResults;
					}
				})
				this.workDate = formatDate(new Date())
			},
			// 获取垃圾清运应清点位
			getGarbageCleanPoint() {
				this.$http.getMapGarbageCleanPoint().then((res) => {
					if (res.code === 200) {
						this.cleanPoint = res.result
						this.noCleanArr = res.result.facilitiesListVoList
					}
				})
			},
			// 获取垃圾清运作业实况数据
			getGarbageWorkScene() {
				this.$http.getMapGarbageWorkScene().then((res) => {
					if (res.code === 200) {
						this.workScene = res.result
					}
				})
			},
			// 车辆监控 右侧图标
			onClickCarRightIcon() {
				this.carCaseVisible = true
			},
			// 组件 车辆情况 类型 点击
			onClickCarCaseTab(item) {
				// console.log(item,'父组件');
			},
			// 组件 车辆情况 输入框 图标 点击
			onClickCarInputIcon() {
				this.searchCarVisible = true
			},
			// 组件 车辆情况 输入框 清空 点击
			onClickCarDeleteInput() {
				this.searchCarVisible = false
			},
			// 点击作业实况图标
			onClickWork() {
				this.workVisible = true
				this.getWorkSceneList()
			},
			// 组件 作业实况 类型 点击
			onClickTypeItem(item) {
				this.getWorkSceneList(item.id)
			},
			// 日期回调
			onChangeWorkDate(date) {
				this.workDate = date
				this.getWorkSceneList()
			},
			onChangeWorkInput(value) {
				this.searchWork = value
			},
			// 组件 作业实况 输入框 图标 点击
			onClickWorkInputIcon() {
				this.searchWorkVisible = true
				this.getWorkSceneList()
			},
			// 组件 作业实况 输入框 清空 点击
			onClickWorkDeleteInput() {
				this.searchWork = ''
				this.searchWorkVisible = false
				this.getWorkSceneList()
			},
			// 作业实况部门树点击
			onChangeTreeDepart(id, name) {
				this.workTreeDepartId = id
				this.getWorkSceneList()
			},
			// 获取作业实况列表
			getWorkSceneList(status = '') {
				let params = {
					departmentId: this.workTreeDepartId,
					planName: this.searchWork,
					workDate: this.workDate,
					status: status == 99 ? '' : status,
					workType: 3
				}
				this.$http.getMapGarbageWorkSceneList(params).then((res) => {
					this.machineWorkList = res.result.list
					this.searchCountWork = res.result.list.length
				})
			},
			// 组件 作业实况 轨迹图标点击
			onClickWorkTrack(item) {
				const {
					href
				} = this.$router.resolve({
					name: 'newTrack',
					query: {
						type: 'car',
						id: item.carId,
						carType: item.carType,
						name: item.carName
					}
				})
				window.open(href, '_blank')
			},
			// 组件 作业实况 详情图标点击
			onClickDetail(item) {
				this.caseDetail = item
				this.caseDetailVisible = true
			},
			// 组件 作业实况 详情 tabs 切换
			onClickDetailTabs(i) {
				this.detailTabsIndex = i
			},
			// 点击 在线情况 出勤情况
			onClickGenItem(index) {
				this.currentGenListIndex = index
				this.genDetailVisible = true
				this.carArr = this.carTypeArr
        bus.$emit('hideSearch')
        bus.$emit('hideMapInfoWindow')
        bus.$emit('hideNavbar')
			},
			// 在线情况 出勤情况弹框关闭时触发
			onChangeGenDetailVisible(boo) {
				// !boo && (this.currentGenListIndex = '')
			},
			onClickGenDetailItem(title, type, status) {
				bus.$emit('onSearchMenuType', {
					title,
					type,
					status
				})
			},
			// 作业实况列表页tab点击
			onClickWorkTab(i) {
				this.workTopIndex = i
			},
			// 垃圾点位-超时未清
			onClickNoClean() {
				this.noCleanVisible = !this.noCleanVisible
			},
			// 垃圾点位-超时未清item
			onClickNoCleanItem(item) {
				bus.$emit('garbageNoCleanItem', item)
			},
			// 点击别处关闭左侧要素弹窗
			handlerCloseGenDetail() {
				this.genDetailVisible = false
			}
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/progress";
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/tabs";
	@import "@/scss/iviewCssReset/tree";
	@import "@/scss/iviewCssReset/datePicker";
	@import "@/scss/custom/mapDefaultcontrol";

	.left {
		width: 400px;
		position: fixed;
		top: 80px;
		bottom: 0;
		left: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.left-person {
			.left-person-item {
				display: flex;
				align-items: center;
				color: #dcdcdc;
				margin-bottom: 20px;
			}
		}

		.left-stay {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 54px;
			position: absolute;
			left: 0;
			/* bottom: 0; */
			background-image: url(../../../../assets/main/alert-img-bj.png);
			font-size: 18px;
			color: rgba(255, 255, 255, 0.65);
			border-radius: 8px;
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
			font-weight: 500;

			span {
				font-size: 28px;
				font-weight: bold;
				color: #f8b551;
				margin-left: 14px;
			}
		}
	}

	.right {
		position: fixed;
		top: 80px;
		bottom: 0;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.right-place {
			font-size: 14px;
			font-weight: bold;
			color: rgba(255, 255, 255, .8);

			.right-place-line {
				display: flex;
				justify-content: center;

				img {
					width: 282px;
					height: 1px;
					display: block;
				}
			}

			.right-place-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 28px;

				.right-place-top-item {
					display: flex;
					align-items: center;
					width: 144px;
					height: 80px;

					.right-place-top-item-icon {
						color: #FFFFFF;
						margin-left: 16px;
						margin-right: 12px;
					}

					.right-place-top-item-text {
						span {
							font-size: 16px;
							font-weight: 800;
							color: #FFFFFF;
						}
					}
				}
			}

			.right-place-bottom {
				padding: 26px 30px 0 45px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right-place-bottom-item {
					font-size: 14px;

					p {
						color: rgba(255, 255, 255, 0.8);
						margin-bottom: 8px;
					}

					span {
						font-size: 16px;
						color: #eee;
					}
				}

				// .right-place-bottom-item:nth-child(2) {
				//   margin-left: 20px;
				// }
				// .line {
				//   margin-left: 23px;
				//   margin-right: 34px;
				// }
				// .right-place-bottom-item:nth-child(5) {
				//   margin-left: 40px;
				// }
			}

			.right-place-list {
				width: 290px;
				max-height: 100px;
				padding: 5px 30px 0;
				margin: 26px 15px 0 38px;
				// background: #fff;
				overflow-y: auto;
				/* border: 1px solid #5ed3b7; */
				border-radius: 6px;

				.item {
					color: #00BAFF;
					margin-bottom: 10px;
				}

				// .item:nth-child(2n) {
				//   justify-content: flex-end;
				// }
			}
		}

		.right-work {
			line-height: 1;
			padding: 0 35px;

			.right-work-bottom {
				.right-work-bottom-item {
					color: rgba(255, 255, 255, .8);
					margin-bottom: 20px;

					.flex {
						margin: 20px 0 12px;
					}

					::v-deep .ivu-progress-inner {
						border-radius: 0;
						background: transparent;
						border: 1px solid rgba(0, 186, 255, 0.6);
						padding: 0;

						.ivu-progress-bg {
							border-radius: 0;
						}
					}
				}
			}

			.right-work-line {
				width: 282px;
				height: 1px;
				display: flex;
				justify-content: center;
			}

			.right-work-cont {
				height: 150px;
				color: rgba(255, 255, 255, 0.65);
				padding: 20px 10px;

				div {
					width: 120px;
					height: 48px;
					color: #FFFFFF;
					font-weight: bold;
					background: url(../../../../assets/new/new_work_bgc.png) 0 0 no-repeat;
					background-size: 100% 100%;
					float: left;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 18px;
					margin: 0 32px 12px 0;
				}

				div:nth-child(2n) {
					margin-right: 0;
				}

				div:nth-child(n+2) {
					margin-bottom: 0;
				}

				div:first-child {
					text-align: left;
				}

				div:last-child {
					text-align: right;
				}
			}

			.right-resource-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 15px;
				/* padding: 0 20px; */

				.right-resource-bottom-item {
					display: flex;
					align-items: center;

					img {
						width: 47px;
						height: 47px;
					}

					.right-resource-bottom-icon {
						border-radius: 50%;
						color: #fff;
						padding: 12px;
						margin-right: 12px;
						border: 1px solid rgba(255, 255, 255, 0.2);
					}

					.right-resource-bottom-item-text {
						margin-left: 15px;

						p {
							min-width: 64px;
							color: rgba(255, 255, 255, 0.8);
							font-size: 16px;
							margin-bottom: 10px;
						}

						div {
							color: rgba(255, 255, 255, 1);

							span {
								margin-left: 2px;
							}
						}
					}
				}
			}
		}

		.right-trend {
			.right-trend-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: rgba(255, 255, 255, 0.7);

				::v-deep {
					.ivu-select-selection {
						background: rgba(0, 0, 0, 0.1);
						border: 1px solid rgba(0, 0, 0, 0.1);
					}

					.ivu-select-item {
						color: #c5c8ce;
					}

					.ivu-icon {
						color: #1ca482;
						font-size: 16px;
					}

					.ivu-select-selected-value {
						color: #fff;
					}

					.ivu-select-dropdown {
						background: rgba(0, 0, 0, 0.6);
						border: 1px solid rgba(255, 255, 255, 0.15);
					}
				}

				span {
					color: #eee;
					font-size: 24px;
					font-weight: bold;
				}
			}
		}
	}

	.car-case-list {
		height: 380px;
		margin: 16px 0;
		overflow: auto;
	}

	// 作业实况 列表
	.work-right {
		width: 362px;
		height: 756px;
		background: url(../../../../assets/new/new_img_756.png) 0 0 no-repeat;
		background-size: 100% 100%;
		position: fixed;
		top: 80px;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: hidden;

		.work-right-title {
			width: 160px;
			height: 54px;
			font-size: 16px;
			color: rgba(255, 255, 255, .9);
			font-weight: bold;
			background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
			background-size: 100% 100%;
			margin: 38px 0 0 20px;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 18px;
				height: 18px;
				margin-right: 10px;
			}
		}
	}

	.work-cont {
		height: 100%;
		padding: 0 30px 0 32px;
		.work-top{
			height: 55px;
			font-size: 16px;
			color: #FFFFFF;
			font-weight: bold;
			line-height: 55px;
		}
	}

	.work-top {
		.work-top-tab {
			margin-bottom: 10px;

			div {
				padding: 5px 10px 0;
				cursor: pointer;
				color: #2bbd99;
			}

			.work-top-tab-current {
				color: #fff;
			}
		}
	}

	/* 作业实况 详情 */
	.case-detail-title {
		display: flex;
		align-items: center;
		color: #ffffff;

		.case-detail-title-status {
			width: 44px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			color: #eee;
			margin-left: 20px;
			font-size: 12px;
			border: 1px solid #ebb31d;
			background: rgba(235, 179, 29, 0.2);
		}
	}

	.case-detail-cont {
		.case-detail-cont-msg {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-right: 10px;
			color: #eee;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			padding-bottom: 16px;
			margin-bottom: 10px;

			.case-detail-cont-msg-msg {
				display: flex;
				align-items: center;

				img {
					width: 44px;
					height: 44px;
					border-radius: 44px;
					margin-right: 10px;
				}

				.case-detail-cont-msg-msg-right {
					color: #eeeeee;
				}
			}

			.case-detail-cont-msg-icon {
				font-size: 24px;
				margin-right: 16px;
				cursor: pointer;
				color: rgba(255, 255, 255, 0.4);
			}
		}

		.case-detail-cont-class {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			color: rgba(255, 255, 255, 0.65);
			padding-left: 10px;

			.line {
				margin: 0 8px;
				width: 1px;
				background: rgba(255, 255, 255, 0.45);
				height: 12px;
			}
		}

		.case-detail-cont-progress {
			padding: 0 10px;

			.case-detail-cont-progress-item {
				margin-bottom: 20px;

				.case-detail-cont-progress-item-title {
					display: flex;
					align-items: center;
					color: rgba(255, 255, 255, 0.65);
					justify-content: space-between;
					margin-bottom: 10px;

					div:last-child {
						color: #eee;
					}
				}
			}
		}

		.case-detail-cont-status {
			border-top: 1px solid rgba(255, 255, 255, 0.15);

			.case-detail-cont-status-tabs {
				display: flex;
				align-items: center;
				height: 32px;
				background: rgba(247, 247, 247, 0.1);
				margin: 14px 0;
				padding-left: 12px;

				div {
					margin-right: 20px;
					cursor: pointer;
				}
			}

			.case-detail-cont-status-tabs-in {
				color: #2bbd99;
			}

			.case-detail-cont-status-cont {
				height: 362px;
				overflow: hidden;

				.case-detail-cont-status-cont-item {
					padding: 26px 24px 0 12px;
					color: rgba(255, 255, 255, 0.65);

					.case-detail-cont-status-cont-item-msg {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10px;
						color: #eeee;

						.icon {
							display: inline-block;
							width: 20px;
							height: 20px;
							border-radius: 20px;
							font-size: 12px;
							line-height: 20px;
							margin-right: 8px;
							color: #fff;
							text-align: center;
						}

						.finish-icon {
							background: rgba(50, 177, 108, 0.2);
							border: 1px solid #2bbd99;
						}

						.underway-icon {
							background: rgba(177, 130, 50, 0.2);
							border: 1px solid #ebb31d;
						}

						.nowork-icon {
							background: rgba(102, 102, 102, 0.2);
							border: 1px solid #a6a6a6;
						}
					}

					.case-detail-cont-status-cont-item-time {
						padding-left: 26px;
					}
				}

				.arrest-point-item {
					padding: 26px 24px 0 12px;
					color: rgba(255, 255, 255, 0.65);

					.arrest-point-item-title {
						display: flex;
						align-items: center;
						font-size: 14px;
						margin-bottom: 17px;

						p {
							border: 1px solid rgb(198, 198, 198);
							padding: 4px 7px;
							margin-right: 7px;
							color: rgba(228, 228, 228, 0.85);
							background: rgba(201, 201, 201, 0.3);
						}
					}

					.arrest-point-item-time {
						color: rgba(255, 255, 255, 0.85);
						margin-left: 56px;
					}
				}
			}
		}
	}

	// 作业实况详情页的图例
	.legend {
		position: absolute;
		bottom: 100px;
		right: 460px;
		background: #eee;
		z-index: 100;
		width: 220px;
		color: rgba(255, 255, 255, 0.75);

		.legend-item {
			background: rgba(0, 0, 0, 0.76);
			border-radius: 6px;
			box-shadow: 0 0 8px 0 #25bb96;
			margin-bottom: 6px;

			.grid-row1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				border-radius: 6px 6px 0 0;
				padding: 14px 12px 10px 12px;

				.line {
					background: #129b3a;
					width: 18px;
					height: 4px;
					margin-right: 6px;
				}
			}

			.grid-row2 {
				padding: 8px 12px 18px 12px;
				border-radius: 0 0 6px 6px;
			}
		}

		.legend-item:nth-child(2) {
			.grid-row1 {
				.line {
					background: rgb(0, 149, 243);
				}
			}
		}
	}
	
	.jiantou-route{
		transform: rotate(90deg);
	}

	::v-deep {

		.work,
		.work-detail {
			display: flex;
			justify-content: flex-end;
			/* cursor: pointer; */
		}
		.icon-gongsi{
			color: #00BAFF !important;
		}
	}
</style>
